<template>
	<view class="container">
		<view class="content">
			<text class="subtitle">展示二维码</text>
			<text class="description">
				这里是说明内容这里是说明内容这里是说明内容这里是说明内容这里是说明内容这里是说明内容
			</text>
			<view class="qrcode-wrapper">
				<view v-if="loading">
					<div id="loader"></div>
				</view>
				<uv-qrcode ref="qrcode" size="300px" value="https://h5.uvui.cn"></uv-qrcode>
			</view>
			<button class="refresh-button" @click="refreshQRCode">点击刷新</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: 'true'
			}
		},
		onLoad() {
			setTimeout(() => {
				this.loading = false
			}, 700)
		},
		methods: {
			refreshQRCode() {
				//加载动画
				this.loading = true
				setTimeout(() => {
					this.loading = false
				}, 700)
				// 刷新二维码的逻辑，可以调用接口获取新的二维码
				this.$refs.qrcode.remake({
					success: () => {
						console.log('生成成功');
					},
					fail: err => {
						console.log(err)
					}
				});
				console.log('二维码刷新');
			}
		}
	};
</script>

<style>
	#loader {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -35px;
		margin-top: -35px;
		width: 70px;
		height: 70px;
		border-style: solid;
		border-top-color: #0b69e2;
		border-right-color: #0b69e2;
		border-left-color: transparent;
		border-bottom-color: transparent;
		border-radius: 50%;
		box-sizing: border-box;
		animation: rotate 3s ease-in-out infinite;
		transform: rotate(-200deg)
	}

	@keyframes rotate {
		0% {
			border-width: 10px;
		}

		25% {
			border-width: 3px;
		}

		50% {
			transform: rotate(115deg);
			border-width: 10px;
		}

		75% {
			border-width: 3px;
		}

		100% {
			border-width: 10px;
		}
	}

	.container {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20px;
		padding: 0 20px;
	}

	.subtitle {
		font-size: 16px;
		color: #333;
		margin-bottom: 10px;
	}

	.description {
		font-size: 14px;
		color: #666;
		text-align: center;
		margin-bottom: 20px;
	}

	.qrcode-wrapper {
		position: relative;
		padding: 10px;
		border: 1px solid #e0e0e0;
		border-radius: 10px;
		margin-bottom: 20px;
	}

	.qrcode {
		width: 200px;
		height: 200px;
	}

	.refresh-button {
		width: 80%;
		height: 40px;
		background-color: #007bff;
		color: #fff;
		text-align: center;
		line-height: 40px;
		border-radius: 5px;
	}
</style>